<template>
    <div>
        <!--  顶部表单 -->
        <el-form>
            <el-form-item>
                <div align="center">
                    <h1>租户人员管理</h1>
                </div>

            </el-form-item>
            <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline" align="center">
                <el-form-item label="租户名称" prop="tenantName">
                    <el-input size="small" clearable v-model="keyword.tenantName" placeholder="租户名称"></el-input>
                </el-form-item>
                <el-form-item label="人员姓名" prop="name">
                    <el-input size="small" clearable v-model="keyword.name" placeholder="人员姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
                    <el-button type="primary" plain size="small" @click="resetSearchForm('searchForm')"
                        icon="el-icon-refresh">重置
                    </el-button>
                </el-form-item>
                <el-form-item class="custom-space">
                    <el-button type="success" size="small" @click="openAddDialog" icon="el-icon-plus">添加信息</el-button>
                    <el-button type="danger" size="small" @click="deleteBatch" icon="el-icon-delete">批量删除</el-button>

                </el-form-item>
            </el-form>

        </el-form>

        <!--  中间框  -->
        <el-table :data="personnelList" height="400" @selection-change="handleSelectionChange" border
            style="width: 100%">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="name" label="人员姓名" align="center">
            </el-table-column>
            <el-table-column prop="phone" label="电话" align="center">
            </el-table-column>
            <el-table-column prop="personnelType" label="人员类型" align="center">
            </el-table-column>
            <el-table-column prop="tenantName" label="租户名称" align="center" width="180">
            </el-table-column>
            <el-table-column prop="floorId" label="楼号" align="center">
            </el-table-column>
            <el-table-column prop="roomName" label="房间名称" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="注册时间" align="center" width="180">
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加对话框 -->
        <el-dialog title="添加课程" :visible.sync="dialogAdd" width="30%">
            <el-form ref="personnelRulesForm" :model="personnel" label-width="80px">
                <el-form-item label="人员姓名" prop="name">
                    <el-input v-model="personnel.name" autocomplete="off" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="personnel.phone" autocomplete="off" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="人员类型" prop="personnelType">
                    <el-input v-model="personnel.personnelType" autocomplete="off" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="租户名称" prop="tenantName">
                    <el-input v-model="personnel.tenantName" autocomplete="off" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="楼号" prop="floorId">
                    <el-input v-model="personnel.floorId" autocomplete="off" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="房间名称" prop="roomName">
                    <el-input v-model="personnel.roomName" autocomplete="off" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="创建时间" prop="createTime">
                    <div class="block">
                        <span class="demonstration"></span>
                        <el-date-picker v-model="personnel.createTime" autocomplete="off" style="width:300px"
                            type="datetime" placeholder="选择日期时间">
                        </el-date-picker>
                    </div>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addonSubmit('personnelRulesForm')">确认保存</el-button>
            </div>
        </el-dialog>

        <!-- 页码框 -->
        <hr>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 20]" :page-size="100" align="center" layout="total,sizes,prev,pager,next,jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
// 导入自己封装的api请求方法
import { getList, deleteById, delBatch, addPersonnel } from '@/api/people'

export default {
    name: 'People',
    data() {
        return {
            // 遮罩层
            loading: true,
            // 人员列表
            personnelList: [],
            // 当前页码
            currentPage: 1,
            pageNum: 1,
            pageSize: 5,
            total: 0,
            ids: [],
            keyword: {
                tenantName: null,
                name: null
            },
            //新增窗口开关
            dialogAdd: false,
            // 新增人员信息
            personnel: {
                name: '',
                phone: '',
                personnelType: '',
                tenantName: '',
                floorId: '',
                roomName: '',
                createTime: '',
            },
            // 表单验证规则
            informationRules: {
                name: [
                    { required: true, message: '请输入人员姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入电话', trigger: 'blur' },
                    { pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
                ],
                personnelType: [
                    { required: true, message: '请输入人员类型', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                tenantName: [
                    { required: true, message: '请输入租户名称', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                floorId: [
                    { required: true, message: '请输入楼号', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                roomName: [
                    { required: true, message: '请输入房间名称', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                createTime: [
                    { required: true, message: '请选择创建时间', trigger: 'change' }
                ]
            }

        }
    },
    methods: {
        clearForm() {

        },
        fetchData() {
            // 组装查询参数
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                tenantName: this.keyword.tenantName,
                name: this.keyword.name
            }
            // getList是api/type.js中自己
            getList(params).then(res => {
                // let pageInfo = res.data
                // console.log("pageInfo",pageInfo)
                this.loading = false
                console.log(res.data)
                this.personnelList = res.data.list
                this.total = res.data.total
            })
        },
        // 多选框选中数据
        handleSelectionChange(selectionRowArr) {
            this.ids = []
            // console.log(selectionRowArr)
            for (let i = 0; i < selectionRowArr.length; i++) {
                this.ids.push(selectionRowArr[i].id)
            }
            // console.log("ids",this.ids)
        },
        //页面大小改变时触发
        handleSizeChange(val) {
            this.pageSize = val
            this.fetchData()

        },
        //当前页码改变时触发
        handleCurrentChange(val) {
            this.pageNum = val
            this.fetchData()

        },
        // 模糊搜索
        search() {
            this.fetchData()
        },
        // 重置表单
        resetSearchForm(formName) {
            this.$refs[formName].resetFields()
            this.fetchData()
        },
        // 根据id删除
        handleDelete(row) {
            //console.log(row.id)
            this.$confirm('是否确认删除该条号号为' + '\'' + row.id + '\'' + '的数据项？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    id: row.id
                }
                deleteById(params).then(res => {
                    if (res.code == 20000) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.fetchData()
                    }
                }).catch(() => {
                    this.$message({
                        type: 'error',
                        message: '当前选课人数不为0,删除失败!'
                    })
                })
            })
        },
        // 批量删除
        deleteBatch() {
            this.$confirm('是否确认删除单位编号为[' + this.ids + ']的数据项？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let idStr = this.ids.join(',')
                console.log('idStr', idStr)
                let params = {
                    ids: this.ids.join(',')
                }
                delBatch(params).then(res => {
                    if (res.code == 20000) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.fetchData()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        // 打开添加对话框
        openAddDialog() {
            this.clearForm();
            this.dialogAdd = true
            console.log(this.$refs)
            this.title = '添加'

        },
        // 添加课程
        addonSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 此处执行添加...
                    console.log(this.personnel)
                    addPersonnel(this.personnel).then(res => {
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '添加成功!'
                        })
                        this.dialogAdd = false
                        this.fetchData()
                        this.$refs[formName].resetFields()
                    })
                        .catch(() => {
                            this.$message({
                                showClose: true,
                                type: 'error',
                                message: '课程名重复,添加失败'
                            })
                            this.dialogAdd = false
                        })
                }

            })

        },
    },
    // 生命周期钩子函数(vue对象创建完,自动调用该方法)
    created() {
        this.fetchData()
    }
}
</script>


<style scoped lang="scss">
.custom-space {
    padding-left: 20px;
    /* 你可以根据需要调整这个值 */
}
</style>